<template>
    <div class="loginForm">
        <div class="loginForm-in">
            <h2>叩丁狼商品管理系统</h2>
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
                class="demo-ruleForm">
                <el-form-item prop="username" label-width="auto">
                    <el-input v-model="ruleForm.username" type="text" autocomplete="off" placeholder="请输入账号"
                        :prefix-icon="Avatar" />
                </el-form-item>
                <el-form-item prop="password" label-width="auto">
                    <el-input v-model="ruleForm.password" type="password" autocomplete="off" placeholder="请输入密码"
                        :prefix-icon="Lock" />
                </el-form-item>
                <el-form-item label-width="auto">
                    <el-button type="primary" @click="submitForm" >提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

</template>

<script setup lang="ts">
import * as http from "@/request/http"
import { FormRules, ElMessage } from "element-plus"
import { reactive, ref } from 'vue';
import { useUserStore } from "@/store/model/user"
import { Lock, Avatar } from '@element-plus/icons-vue'
import {useRouter} from "vue-router"
const router = useRouter()
const userStore = useUserStore()
const ruleFormRef = ref()
const FormRules = (rules: unknown, value: string | undefined, callback: (msg?: string) => void) => {
    if (value === "") {
        callback("请输入用户名!")
    } else {
        callback()
    }
}
const FormRules2 = (rules: unknown, value: string | undefined, callback: (msg?: string) => void) => {
    if (value === "") {
        callback("请输入密码!")
    } else {
        callback()
    }
}
const rules = reactive<FormRules>({
    // username:[{required:true,message:"请输入用户名!",trigger:'blur'}],
    // password:[{required:true,message:"请输入密码!",trigger:'blur'}]
    username: [{ validator: FormRules, trigger: 'blur' }],
    password: [{ validator: FormRules2, trigger: 'blur' }]
})
const ruleForm = reactive({
    username: "",
    password: ""
})
const submitForm = () => {
    // 方式一
    // ruleFormRef.value.validate((isValid: boolean)=>{
    //     if(isValid){
    //         console.log("验证通过");
    //     }else{
    //         console.log("验证失败");
    //     }
    // })
    // 方式二
    ruleFormRef.value.validate().then(() => {
        http.admin.loginHttp({
            password: ruleForm.password,
            username: ruleForm.username
        }).then(async (res) => {
            // console.log(res);
            if (res.code == 200) {
                // 提示
                ElMessage({
                    message: '登录成功!',
                    type: 'success',
                })
                // 存token
                localStorage.setItem("token", res.data.tokenHead + res.data.token)
            }
            // 请求当前登录的用户信息 (权限)
            // let res2 = await http.admin.infoHttp()
            // userStore.updateMenus(res2.data.menus)
            //   跳转页面到首页
            router.push(`/index`)
        })
        ruleForm.password = ""
        ruleForm.username = ""
    }).catch(() => {
        ElMessage({
            message: '验证失败!',
            type: 'error',
        })
    })
}
</script>

<style lang="scss" scoped>
.loginForm {
    width: 100vw;
    height: 100vh;
    background-color: #2d3a4b;

    h2 {
        color: #fff;
        margin-bottom: 10px;
    }

    .loginForm-in {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 420px;
        text-align: center;
        // border: 1px solid #fff;
    }

    :deep(.demo-ruleForm) {
        width: 100%;

        .el-input {
            height: 50px;
        }

        .el-input__prefix-inner {
            font-size: 20px;
        }

        .el-button {
            width: 100%;
            height: 40px;
        }

        .el-input__wrapper {
            background-color: #283443;
            box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
        }
    }
}
</style>